<template>
  <div>
    <h1>【aty-spin】 component demo</h1>
    <p>【aty-spin】 本质</p>
    <aty-row class="fd-spin-box">
      <aty-row>
        <aty-title level="4">1.【aty-spin】 基础</aty-title>
        <aty-spin />
      </aty-row>

      <aty-row>
        <aty-title level="4">2.【aty-spin】 垂直居中</aty-title>
        <aty-panel class="fd-spin-contain">
          <aty-spin size="small" />
        </aty-panel>
      </aty-row>

      <aty-row class="fd-spin-posr">
        <aty-title level="4">3.【aty-spin】 自定义内容</aty-title>
        <aty-col span="8">
          <aty-spin fix>加载中...</aty-spin>
        </aty-col>
        <aty-col span="8">
          <aty-spin fix size="large">
            <aty-icon type="load-c" size="18" class="demo-spin-icon-load" />
            <div>Loading</div>
          </aty-spin>
        </aty-col>
        <aty-col span="8">
          <aty-spin fix>
            <div class="loader">
              <svg class="circular" width="100" height="100" viewBox="0 0 100 100">
                <circle
                  class="fd-path"
                  cx="50"
                  cy="50"
                  r="20"
                  fill="none"
                  stroke="#3399ff"
                  stroke-width="5"
                  stroke-miterlimit="10" />
              </svg>
            </div>
          </aty-spin>
        </aty-col>
      </aty-row>

      <aty-row>
        <aty-title level="4">4.【aty-spin】 状态切换</aty-title>
        <div class="demo-spin-article">
          <h3>登金陵凤凰台</h3>
          <address>李白</address>
          <article>
            <p>凤凰台上凤凰游，凤去台空江自流。</p>
            <p>吴宫花草埋幽径，晋代衣冠成古丘。</p>
            <p>三山半落青天外，二水中分白鹭洲。</p>
            <p>总为浮云能蔽日，长安不见使人愁。</p>
          </article>
          <aty-spin size="large" fix v-if="spinShow" />
        </div>
        <br />
        切换显示状态：<aty-switch :checked="spinShow" @change="change" />
      </aty-row>

      <aty-row>
        <aty-title level="4">5.【aty-spin】 整页加载</aty-title>
        <aty-button type="primary" @click="handleSpinShow">整页显示，3秒后关闭</aty-button>
        <aty-button type="primary" @click="handleSpinCustom">自定义显示内容</aty-button>
      </aty-row>
    </aty-row>
  </div>
</template>
<script>
export default {
  data: function () {
    return {
      spinShow: true
    }
  },
  methods: {
    change (value) {
      this.spinShow = value
    },
    handleSpinShow () {
      Artery.spin.show()
      setTimeout(() => {
        Artery.spin.hide()
      }, 3000)
    },
    handleSpinCustom () {
      Artery.spin.show({
        render: (h) => {
          return h('div', [
            h('aty-icon', {
              class: 'demo-spin-icon-load',
              props: {
                type: 'load-c',
                size: 18
              }
            }),
            h('div', 'Loading')
          ])
        }
      })
      setTimeout(() => {
        Artery.spin.hide()
      }, 3000)
    }
  }
}
</script>

<style  lang="less" type="text/less"  >
    .fd-spin-box {
        margin: 20px;
        text-align: left;
    }

    .demo-spin-article {
        position: relative;
        width: 200px;
        height: 200px;
        border: 1px solid #ddd;
    }

    .fd-spin-contain {
        display: flex;
        flex-flow: row nowrap;
        justify-content: center;
        align-content: center;
        align-items: center;
        width: 200px;
        height: 100px;
        position: relative;
        border: 1px solid #eee;
    }

    .fd-spin-posr >.aty-col{
        position: relative;
        height: 200px;
    }

    .demo-spin-icon-load{
        animation: ani-demo-spin 1s linear  infinite;
    }
    @keyframes ani-demo-spin {
        from { transform: rotate(0deg);}
        50%  { transform: rotate(180deg);}
        to   { transform: rotate(360deg);}
    }
    .fd-path{
        stroke-dasharray: 1,157.07963267948966;
        stroke-dashoffset: 0;
        stroke-linecap: round;
        animation: stroke 2s ease-in-out  infinite;
    }

    @keyframes stroke {
        0% {
            stroke-dasharray: 1,157.07963267948966;
            stroke:#3399ff;
            stroke-dashoffset: 0
        }
        50% {
            stroke-dasharray: 80,157.07963267948966;
            stroke-dashoffset: -60
        }
        100% {
            stroke:purple;
            stroke-dasharray: 90,157.07963267948966;
            stroke-dashoffset: -157.07963267948966
        }
    }

</style>
